import { NodeSize } from '../config'

export default function jsScripting(flow) {
  flow.register('JsScripting', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#0CB20F',
              d: 'M675.937524 675.59619v271.311239l290.889143-135.484953-290.889143-135.826286z m45.080381 70.851048l139.068952 64.926476-139.068952 64.75581v-129.682286z'
            }
          ),
          h(
            'path',
            {
              fill: '#FFECCE',
              d: 'M713.606095 274.895238h41.423238v27.209143h27.477334c26.038857 0 47.250286-21.187048 47.250285-47.225905s-21.187048-47.225905-47.250285-47.225905H425.301333c-58.709333 0-91.038476 32.329143-91.038476 91.038477v371.833904h150.211048v41.423238h-230.107429a47.299048 47.299048 0 0 0-47.250286 47.250286 47.299048 47.299048 0 0 0 47.250286 47.225905h286.817524l172.422095-172.422095V274.895238z m-232.155428 258.657524c0 8.582095-0.585143 13.994667-4.754286 20.163048-1.950476 2.950095-4.729905 6.022095-8.43581 9.703619l-14.628571 13.775238-2.194286 2.072381-15.384381-17.383619 2.048-1.950477c9.898667-9.508571 14.628571-14.06781 16.944762-17.481142 2.048-2.925714 2.145524-4.754286 2.145524-9.557334V388.144762h24.234667v145.408z m70.144 4.608c-13.872762 0-30.72-2.584381-43.276191-7.655619l-2.291809-0.902095 4.120381-20.528762 3.120762 0.975238c12.702476 3.949714 26.087619 6.046476 38.765714 6.046476 21.577143 0 24.576-4.998095 24.576-19.21219 0-4.608 0-8.167619-0.463238-10.99581a9.118476 9.118476 0 0 0-2.438096-5.38819c-2.974476-2.925714-9.264762-4.85181-24.234666-8.265143-35.547429-7.92381-40.667429-15.652571-40.667429-46.543238 0-26.721524 11.922286-39.619048 48.323048-39.619048 12.604952 0 27.550476 1.731048 39.107047 4.778667l2.438096 0.633904-2.048 21.382096-3.291429-0.731429a168.764952 168.764952 0 0 0-35.791238-3.974095c-22.211048 0-24.551619 3.900952-24.551619 18.139428 0 4.729905-0.024381 8.313905 0.414476 11.166477 0.390095 2.535619 1.072762 4.047238 2.267429 5.241904 2.779429 2.80381 8.728381 4.608 23.235047 8.240762 38.814476 9.654857 41.862095 16.188952 41.862096 45.494857 0.024381 26.38019-8.557714 41.71581-49.176381 41.71581z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M207.11619 759.222857a47.299048 47.299048 0 0 1 47.250286-47.250286h230.107429v-41.423238H334.262857v-371.809523c0-58.709333 32.329143-91.038476 91.038476-91.038477h357.205334c26.038857 0 47.250286 21.187048 47.250285 47.225905s-21.187048 47.225905-47.250285 47.225905h-27.477334v-27.209143h-41.423238v359.131429l41.423238-41.423239V343.527619h27.477334c48.90819 0 88.673524-39.765333 88.673523-88.649143s-39.765333-88.649143-88.673523-88.649143H425.301333c-81.724952 0-132.486095 50.761143-132.486095 132.486096v371.833904h-38.448762a88.746667 88.746667 0 0 0-88.673524 88.673524 88.746667 88.746667 0 0 0 88.673524 88.649143h245.369905l41.423238-41.423238H254.366476a47.299048 47.299048 0 0 1-47.250286-47.225905z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M457.216 532.943238c0 4.778667-0.097524 6.607238-2.145524 9.557333-2.340571 3.413333-7.046095 7.972571-16.944762 17.481143l-2.048 1.950476 15.384381 17.38362 2.194286-2.072381 14.628571-13.775239c3.681524-3.681524 6.485333-6.753524 8.43581-9.703619 4.169143-6.168381 4.754286-11.605333 4.754286-20.163047v-145.359238h-24.234667v144.700952zM558.933333 450.950095c-14.506667-3.608381-20.455619-5.436952-23.235047-8.240762-1.194667-1.194667-1.877333-2.681905-2.267429-5.241904-0.438857-2.852571-0.414476-6.436571-0.414476-11.166477 0-14.238476 2.340571-18.139429 24.551619-18.139428 11.53219 0 24.697905 1.462857 35.791238 3.974095l3.291429 0.731429 2.048-21.382096-2.438096-0.633904a165.010286 165.010286 0 0 0-39.107047-4.778667c-36.400762 0-48.323048 12.897524-48.323048 39.619048 0 30.915048 5.12 38.619429 40.667429 46.543238 14.969905 3.413333 21.26019 5.339429 24.234666 8.265143a9.045333 9.045333 0 0 1 2.438096 5.38819c0.463238 2.82819 0.463238 6.38781 0.463238 10.99581 0 14.214095-2.998857 19.21219-24.576 19.21219-12.678095 0-26.038857-2.096762-38.765715-6.046476l-3.120761-0.975238-4.120381 20.528762 2.291809 0.902095c12.580571 5.071238 29.403429 7.655619 43.276191 7.655619 40.618667 0 49.200762-15.335619 49.200762-41.71581-0.024381-29.305905-3.072-35.864381-41.886477-45.494857z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'JavaScript代码'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
